<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/${initParam.context_root }/script/jquery.js"></script>
<script type="text/javascript">
	
$(document).ready(function(){
	setInterval("getMessage()", 2000);
});

function getMessage(){
	
	$.ajax({
		url:"/${initParam.context_root }/chatting/get.do"
		, type:"GET"
		, data:"fromId="+'${requestScope.fromId }'
		, dataType:"JSON"
		, error:function(){
		}
		, success:function(json){
			var tbody = document.getElementById("tbody");
			
			for(var i = 0; i < json.length; i++){
				tbody.innerHTML = tbody.innerHTML+"<tr><td>"+json[i].time+"</td><td>"+json[i].fromId+"</td><td>"+json[i].message+"</td><td></td><td></td><td></td></tr>";
			}
		}
	});
}

function sendMessage(){
	//alert("toId=${requestScope.toId }&fromId=${requestScope.fromId}&message="+encodeURI($("#message").val(), "UTF-8"));
	//var formData = $("#sendForm").serialize();
	$.ajax({
		url:"/${initParam.context_root }/chatting/send.do",
		type:"GET", 
		data:"toId=${requestScope.toId }&fromId=${requestScope.fromId}&message="+encodeURI($("#message").val(), "UTF-8"),
		dataType:"JSON"
		//, data: formData
		//, dataType:"JSON"
		, success:function(json){
			//alert(JSON.stringify(json));
			var tbody = document.getElementById("tbody");
				tbody.innerHTML = tbody.innerHTML+"<tr><td></td><td></td><td></td><td>"+json.time+"</td><td>"+json.fromId+"</td><td>"+json.message+"</td></tr>";
		}
	});
}
</script>
<title>Insert title here</title>
</head>

<body>

<!-- <form id="sendForm" method="post">
	<input type="text" name="message" placeholder="메세지입력" onKeyDown="javascript:if (event.keyCode == 13) sendMessage();">
	<input type="hidden" name="toId" value="${requestScope.toId }">
	<input type="hidden" name="fromId" value="${requestScope.fromId }">
	<input type="button" value="전송!" onclick="sendMessage();" >
</form>

 -->
 <input type="text" id="message" plasceholder="메세지입력" onKeyDown="javascript:if (event.keyCode == 13) {sendMessage(); }">
 <input type="button" value="전송!" onclick="sendMessage();">
<br><br>

<table border='1' width="700">
	<thead>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</thead>
	<tbody id="tbody">
	</tbody>
	<tfoot>
	</tfoot>
</table>

</body>
</html>
